<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="150" height="150px"></canvas>
    <script type="text/javascript">
        function draw() {
            const canvasId = document.getElementById("mycanvas");
            if (canvasId.getContext) {
                const ctx = canvasId.getContext("2d");
                ctx.fillRect(25,25,100,100);
                ctx.strokeStyle = "red";
                ctx.clearRect(45,45,60,60);
                // 这里两个位置是不能换的，因为换了之后会将strokeRect绘制的矩形一起清除掉
                ctx.strokeRect(50,50,50,50);
            }
        }
    </script>
</body>
</html>